<template>
    <main-wrap class="collection" :loading="true" :load="onLoad" :end="page.finished">
        <template v-slot:header>
            <Header title="艺术家"/>
        </template>
        <div class="mainBox">
            <artist-list :lists="page.lists"/>
        </div>

        <template v-slot:footer>
            <div class="adBtnBox">
                <my-button text="艺术家入住" @click="done"/>
            </div>
        </template>
        
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import {Toast} from 'vant'
import Header from '@/components/header.vue'
import mainWrap from '@/components/mainWrap.vue'
import myButton from '@/components/myButton.vue';
import artistList from '@/components/artistList.vue';
import {toast} from '@/utils/common.js'
export default {
    components:{
        mainWrap,
        Header,
        myButton,
        artistList
    },
    setup(){
        const store = useStore()

        const state = reactive({
            ggg:computed(()=>store.state.demo.backUrl),
            keyword:'',
            page:{
                lists:[],
                pageIndex:1,
                pageSize:20,
                finished: false
            }
        })

        onMounted(()=>{
           onLoad()
        })

        const onLoad = ()=> {
            // 此函数必须返回一个Promise对象
            return new Promise((resolve, reject) => {
                setTimeout(async () => {
                    const res = await store.dispatch("arApi/getArtist", {
                        page: state.page.pageIndex,
                        limit: state.page.pageSize,
                        "orderField": "",
                        "orderType": "",
                    });
                    state.page.lists = [...state.page.lists, ...res.data];
                    state.page.pageIndex++;
                    if (state.page.lists.length >= res.total) {
                        state.page.finished = true;
                    }
                    resolve(true);
                }, 500);
            });
        }

        const done = ()=>{
            toast('暂未开放！')
        }        

        return {
            ...toRefs(state),
            onLoad,
            done
        }
    }
}
</script>

<style lang="scss" scoped>
    .collection{
        background-image: url('/images/clbg.png');
        background-position:left top;
        background-repeat: no-repeat;
        background-size:100% auto ;
    }
    .mainBox{
        width: 100%;
        overflow: hidden;
        padding: 30px 40px;
    }
    
    .adBtnBox{
        padding: 40px;
    }
</style>